<template>
    <div>
      <vab-card>
        <template #header>
          <div class="flex_sb">
              <span class="leve_title">产品-客户-销售组织映射</span>
              <VabUploadFile style="width: 54px;" :showFileList="false" api="/api/dms/product/importProductCustomerOrg" @refresh="_GetProductList"/>
          </div>
        </template>
        <template  #default>
          <el-form
            :ref="(el: any) => (searchFormRef = el)"
            :model="searchForm"
            label-width="110px"
            class="form_search composite_form"
          >
            <el-row :gutter="24">
              <el-col
                v-for="(item, i) in MappingSearch"
                :key="i"
                v-bind="colLayout"
              >
                <!-- 默认项 -->
                <el-form-item
                  v-if="item.type == 'select'"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <VabSelectForm
                    multiple
                    :options="selectOptions(item.prop)"
                    v-model.trim="searchForm[item.prop]"
                    @keyup.enter.native="onkeydown"
                  />
                </el-form-item>
              </el-col>
              <!-- 按钮 -->
              <el-col v-bind="btnLayout">
                <div class="flex_just_end">
                  <el-button size="small" type="primary" @click="handleSearch()">
                    查询
                  </el-button>
                  <el-button size="small" @click="resetForm(searchFormRef)">
                    重置
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </vab-card>
      <!-- 主 -->
      <vab-card>
        <template #header>
          <div class="flex_sb">
            <span class="leve2_title">明细信息列表</span>
          </div>
        </template>
        <el-table
          border
          height="600"
          style="width: 100%"
          :data="data.dataSource"
          v-loading="data.loading"
        >
          <el-table-column align="center" label="序号" width="60" fixed="left">
            <template #default="scope">
              <label
                class="el-checkbox"
                :class="{ 'is-checked': radioKey == scope.row.id }"
                @click="handleCurrentChange(scope.row)"
              >
                <span style="margin-left: 4px;">{{ (data.pageNum - 1) * data.pageSize + (scope.$index + 1) }}</span>
              </label>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, i) in data.cloums"
            :key="i"
            :min-width="100"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :align="item.type == 'money' || item.type == 'number' ? 'right' : 'center'
              "
          >
            <template #default="{ row }">
              <!-- 自定义 -->
              <div v-if="item.type == 'custom'">
                <div class="flex"  v-if="item.prop == 'price_list_name'">
                  <div v-if="row.price_list_name">
                    <span
                      v-for="(jtem, j) in row.price_list_name"
                      :key="j"
                      class="ellipsis link"
                      @click="handleClick('toPriceListCheck', jtem.id)"
                    >
                        {{ jtem.name || '' }}
                    </span>
                  </div>
                  <div v-else>--</div>
                </div>
              </div>
              <!-- 正常 -->
              <div v-else class="ellipsis">
                {{ _FieldFormat(row[item.prop], item.type) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex_just_end">
          <el-pagination
            background
            small="small"
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            layout="total, prev, pager, next,sizes, jumper"
            :page-sizes="[20, 50, 100, 200]"
            :pager-count="10"
            :total="data.count"
            @current-change="handlePageNum"
            @size-change="handlePageSize"
          />
          <a href="" id="infoEl"></a>
        </div>
      </vab-card>
    </div>
  </template>
  <!-- 草稿箱 -->
<script lang="ts" setup>
defineOptions({
  name: 'Mapping',
})
/**
 * @import
 */
import {
  MappingCloums,
  MappingSearch,
  RetrunOptions,
} from './component/means'
import {
  DateFormat,
  FieldFormat,
} from '~/src/utils/utils'
import { FormInstance } from 'element-plus'
import { getProductSearch, productCustomerOrgList, productCustomerOrgSearch } from '~/src/api/dms/product';

/**
 * @var
 */
const colLayout = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 6,
  xl: 6,
}
const btnLayout = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 18,
  xl: 18,
}

const proxy: any = getCurrentInstance()?.proxy
const router = useRouter()
const searchFormRef = ref<any>(null)
const searchForm = reactive<any>({})
const data = reactive<any>({
  dataSource: [],
  cloums: [],
  pageNum: 1,
  pageSize: 20,
  count: 0,
  search: {},
})
data.dataSource = []
data.cloums = MappingCloums

let isCheck = ref(false)
const currentRow = ref<any>(null) //选中块
const radioKey = ref<any>(-1) //唯一值

/**
 * @method
 */
const handleSearch = async (value = '') => {
  isCheck.value = true
  await _GetProductList()
  proxy.$Message('查询成功', 'success')
}
// 重置
const resetForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  isCheck.value = false

  data.pageNum = 1
  data.pageSize = 20
  await formEl.resetFields()
  await _GetProductList()
  proxy.$Message('重置成功', 'success')
}
// 回车
const onkeydown = (value: any) => {
  isCheck.value = true
  _GetProductList()
}
// 单选
const handleCurrentChange = (row: any) => {
  if (row.id == radioKey.value) {
    radioKey.value = -1
    currentRow.value = null
    return
  }
  radioKey.value = row.id
  currentRow.value = row
}
// 页码
const handlePageNum = (value: any) => {
  data.pageNum = value
  _GetProductList()
}
// 页数
const handlePageSize = (value: any) => {
  data.pageSize = value
  _GetProductList()
}
// 点击事件
const handleClick = (type: string, value: any) => {
  if (type == 'toPriceListCheck') {
    router.push({
      path: '/customer/priceListCheck',
      query: {
        priceListName: value
      }
    })
  }
}
//刷新
const refresh = () => {
  radioKey.value = -1
  currentRow.value = null
  _GetProductList()
}

// 字段级格式化
const _FieldFormat = (value: string, type = '') => {
  if (type == 'time') return DateFormat(value, 'YYYY-MM-DD')
  return FieldFormat(value, type)
}
// 筛选项返回值
const selectOptions = (value: string) => {
  if (!data.search) return
  if (!value) return
  return RetrunOptions(data.search, value)
}
// 筛选项
const _GetProductSearch = async () => {
  try {
    const res = await productCustomerOrgSearch()
    data.search = res.data
  } catch (error) { }
}

// 获取数据
const _GetProductList = async () => {
  data.loading = true

  let _searchForm = { ...searchForm }

  if (!isCheck.value) _searchForm = {}

  const { assistant_id, barcode, name, org_id, group_id } = _searchForm

  const query = {
    page: data.pageNum,
    limit: data.pageSize,
    filter: {
      assistant_id: assistant_id || [],
      barcode: barcode || [],
      name: name || [],
      org_id: org_id || [],
      group_id: group_id || [],
    },
  }

  try {
    const res = await productCustomerOrgList({ ...query })
    data.dataSource = res.data.list
    data.count = res.data.count
    data.loading = false
  } catch (error) { }
}

/**
 * @实例
 */
onActivated(async () => {
  _GetProductSearch()
  await _GetProductList()
})
</script>

<style lang="scss" scoped>
@import '../../components/public.scss';
</style>
  ./component/priceOutside/tools
